<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">


    <head th:include="common/common::header">
    </head>

<body>
<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a>
			<a> <cite>导航元素</cite>
		</a> </span> <a class="layui-btn layui-btn-small"
                        style="line-height:1.6em;margin-top:3px;float:right"
                        href="javascript:location.replace(location.href);" title="刷新">
    <i class="layui-icon" style="line-height:30px">&#xe666</i>
</a>
</div>
<div style="height: 100px; padding-top: 30px;padding-left: 100px;padding-right: 100px">
    <p style="font-size: 32px">个人信息进度</p><br>
    <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
        <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
    </div>
</div>

<!----------------------------form表单显示个人信息------------------------------------>
<form shiro:hasPermission="user_form" class="layui-form" id="ff" action="">
    <div style="margin-left: 150px" id="user-one">
    <div class="layui-form-item">
        <label for="username" class="layui-form-label"> 用户账号 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="username" name="username"
                   lay-verify="required"  autocomplete="off" class="layui-input" placeholder="请输入用户账号">
        </div>
        <label for="payphone" class="layui-form-label"> 支付宝账号 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="payphone" name="payphone"
                   autocomplete="off" class="layui-input" disabled>
        </div>
        <label for="id" class="layui-form-label"> 用户编号 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="id" name="id" disabled
                   autocomplete="off" class="layui-input">
        </div>
        <label for="uname" class="layui-form-label"> 用户姓名<span class="x-red">*</span> </label>
        <div class="layui-input-inline">
            <input type="text" id="uname" name="name" disabled
                   autocomplete="off" class="layui-input">
        </div>

    </div>

    <div class="layui-form-item">
        <label for="userSex" class="layui-form-label"> 性别 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="userSex" name="userSex" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="userCard" class="layui-form-label"> 身份证号<span class="x-red">*</span> </label>
        <div class="layui-input-inline">
            <input type="text" id="userCard" name="userCard" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="startTime" class="layui-form-label"> <span
                class="x-red"></span>入住时间 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="startTime" name="startTime" disabled
                   autocomplete="off" class="layui-input">
        </div>
        <label for="endTime" class="layui-form-label"> <span
                class="x-red"></span>到期时间 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="endTime" name="endTime" disabled
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label for="roomNumber" class="layui-form-label"> 房间号<span class="x-red">*</span> </label>
        <div class="layui-input-inline">
            <input type="text" id="roomNumber" name="roomNo" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="bedNum" class="layui-form-label"> 床位号<span class="x-red">*</span> </label>
        <div class="layui-input-inline">
            <input type="text" id="bedNum" name="bedNum" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="roomType" class="layui-form-label"> 房间类型<span class="x-red">*</span> </label>
        <div class="layui-input-inline">
            <input type="text" id="roomType" name="roomType" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="roomSize" class="layui-form-label"> 房间大小 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="roomSize" name="roomSize" disabled
                    autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label for="deposit" class="layui-form-label"> 交纳押金<span class="x-red">*</span> </label>
        <div class="layui-input-inline">
            <input type="text" id="deposit" name="deposit" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="payType" class="layui-form-label"> 交租方式 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="payType" name="payType" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="userAddr" class="layui-form-label"> 个人所在地 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="userAddr" name="userAddr" disabled
                    autocomplete="off" class="layui-input">
        </div>
    </div>
    </div>
    <hr>
    <div style="margin-left: 150px" id="user-two">
    <div class="layui-form-item">
        <label for="username" class="layui-form-label"> 用户账号 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="username1" name="username"
                   lay-verify="required"  autocomplete="off" class="layui-input" placeholder="请输入用户账号">
        </div>
        <label for="payphone" class="layui-form-label"> 支付宝账号 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="payphone1" name="payphone"
                   autocomplete="off" class="layui-input" disabled>
        </div>
        <label for="id" class="layui-form-label"> 用户编号 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="id1" name="id" disabled
                   autocomplete="off" class="layui-input">
        </div>
        <label for="uname" class="layui-form-label"> 用户姓名<span class="x-red">*</span> </label>
        <div class="layui-input-inline">
            <input type="text" id="uname1" name="name" disabled
                   autocomplete="off" class="layui-input">
        </div>

    </div>

    <div class="layui-form-item">
        <label for="userSex" class="layui-form-label"> 性别 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="userSex1" name="userSex" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="userCard" class="layui-form-label"> 身份证号<span class="x-red">*</span> </label>
        <div class="layui-input-inline">
            <input type="text" id="userCard1" name="userCard" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="startTime" class="layui-form-label"> <span
                class="x-red"></span>入住时间 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="startTime1" name="startTime" disabled
                   autocomplete="off" class="layui-input">
        </div>
        <label for="endTime" class="layui-form-label"> <span
                class="x-red"></span>到期时间 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="endTime1" name="endTime" disabled
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label for="roomNumber" class="layui-form-label"> 房间号<span class="x-red">*</span> </label>
        <div class="layui-input-inline">
            <input type="text" id="roomNumber1" name="roomNo" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="bedNum" class="layui-form-label"> 床位号<span class="x-red">*</span> </label>
        <div class="layui-input-inline">
            <input type="text" id="bedNum1" name="bedNum" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="roomType" class="layui-form-label"> 房间类型<span class="x-red">*</span> </label>
        <div class="layui-input-inline">
            <input type="text" id="roomType1" name="roomType" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="roomSize" class="layui-form-label"> 房间大小 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="roomSize1" name="roomSize" disabled
                    autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label for="deposit" class="layui-form-label"> 交纳押金<span class="x-red">*</span> </label>
        <div class="layui-input-inline">
            <input type="text" id="deposit1" name="deposit" disabled
                   autocomplete="off" class="layui-input">
        </div>
        <label for="payType" class="layui-form-label"> 交租方式 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="payType1" name="payType" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="userAddr" class="layui-form-label"> 个人所在地 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="userAddr1" name="userAddr" disabled
                    autocomplete="off" class="layui-input">
        </div>
    </div>
    <div shiro:hasPermission="user_form" class="layui-form-item">
        <div class="layui-input-block">
            <a class="layui-btn search_btn" onclick="roomChange()">确认更换</a>
            <button type="reset"  class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    </div>
</form>


    <script th:inline="none">
        layui.use('element', function() {
            var $ = layui.jquery
                , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块


        });
        //触发事件
        function setPercent(size) {
            //设置50%进度
            element.progress('demo', size);

        }
        /*--------------------第一个人的时间---------------------------*/
        $("#username").blur(function(){
            $.post('/dangxia/user/getInfoByUsername',{
                username:$("#username").val()
            },function (data) {
                if (data.code == 1) {
                    msg1("没有此人信息！");
                    return false;
                } else {
                    setPercent('50%');
                    $("#id").val(data.id);
                    $("#uname").val(data.name);
                    //$("#username").val(data.username);
                    $("#userAddr").val(data.userAddr);
                    $("#userCard").val(data.userCard);
                    $("#deposit").val(data.deposit);
                    $("#payphone").val(data.payphone);
                    $("#startTime").val(data.startTime);
                    $("#endTime").val(data.endTime);
                    $("#payType").val(data.payType);
                    $("#roomNumber").val(data.roomNo);
                    $("#roomType").val(data.roomType);
                    $("#roomSize").val(data.roomSize);
                    $("#bedNum").val(data.bedNum);
                    if (data.userSex == 0) {
                        $("#userSex").val('女');
                    } else {
                        $("#userSex").val('男');
                    }
                    ;
                    if (data.roomType == 0) {
                        $("#roomType").val('女寝');
                    } else {
                        $("#roomType").val('男寝');
                    }
                    ;
                    if (data.roomSize == 8) {
                        $("#roomSize").val('八人间');
                    } else {
                        $("#roomSize").val('十人间');
                    }
                    ;
                    if (data.payType == 0) {
                        $("#payType").val('每月按时交租');
                    } else {
                        $("#payType").val('五月内免租');
                    }
                    ;
                }
            });
        });
        /*-----------------------第二个人的信息----------------------------------*/
            $("#username1").blur(function () {
                $.post('/dangxia/user/getInfoByUsername', {
                    username: $("#username1").val()
                }, function (data) {
                    if (data.code == 1) {
                        msg1("没有此人信息！");
                    } else {
                        setPercent('100%');
                        $("#id1").val(data.id);
                        $("#uname1").val(data.name);
                        //$("#username").val(data.username);
                        $("#userAddr1").val(data.userAddr);
                        $("#userCard1").val(data.userCard);
                        $("#deposit1").val(data.deposit);
                        $("#payphone1").val(data.payphone);
                        $("#startTime1").val(data.startTime);
                        $("#endTime1").val(data.endTime);
                        $("#payType1").val(data.payType);
                        $("#roomNumber1").val(data.roomNo);
                        $("#roomType1").val(data.roomType);
                        $("#roomSize1").val(data.roomSize);
                        $("#bedNum1").val(data.bedNum);
                        if (data.userSex == 0) {
                            $("#userSex1").val('女');
                        } else {
                            $("#userSex1").val('男');
                        }
                        ;
                        if (data.roomType == 0) {
                            $("#roomType1").val('女寝');
                        } else {
                            $("#roomType1").val('男寝');
                        }
                        ;
                        if (data.roomSize == 8) {
                            $("#roomSize1").val('八人间');
                        } else {
                            $("#roomSize1").val('十人间');
                        }
                        ;
                        if (data.payType == 0) {
                            $("#payType1").val('每月按时交租');
                        } else {
                            $("#payType1").val('五月内免租');
                        }
                        ;
                    }
                });
            });
        /*-------------------点击事件事件---------------------*/
        function roomChange(){
            if ($("#username").val()!='') {
                if($("#username1").val()!=''){
                    $.post('/dangxia/user/changeRoom',{
                        id:$("#id").val(),
                        id1:$("#id1").val()
                    }, function(data) {
                        if (data==0){
                            //msg1("更换房间成功，可前去查看！");

                            if(confirm("更换房间成功！是否前去查看？")){
                                  window.location.href='http://localhost:8080/dangxia/user/toGetAll';
                            }else {
                                $("#ff")[0].reset();
                            }
                        }
                    });
                }else {
                    msg1("请输入第二个人的用户名！");
                    return false;
                }

            } else{
                msg1("请输入第一个人的用户名！");
                return false;
            }

        }
        function msg1(message){
            //配置一个透明的询问框
            layer.msg(message, {
                time: 3000 //20s后自动关闭
               //btn: ['ok','close']
            });
        }

    </script>
</body>
</html>